<template>
  <view v-if="!isLoading">
    <view class="search">
      <view class="yz-iconfont yz-sousuo"></view>
      <input type="text" placeholder-class="search_ph" @input="keywordInput" placeholder="请输入搜索关键词">
    </view>
    <view class="lists" v-if="!isEmpty">
      <view v-for="(item,index) in lists" class="item" @tap="select(item.id,item.name)">
        <view>{{item.name}}</view>
      </view>
    </view>
    <view v-else>
      <xy-empty text="暂无数据" />
    </view>
  </view>
</template>

<script>
import { mapState } from 'vuex';
import xyEmpty from '@/components/xy-empty';
export default {
  components: {
    xyEmpty,
  },
  data() {
    return {
      isLoading: true,
      isEmpty: true,
      keyword: '',
      lists: [],
      currentPage: 1,
      lastPage: 1,
    }
  },
  computed: {
    ...mapState(['common'])
  },
  async onLoad(options) {
    if (options?.type) {
      this.type = options.type;
    }
    this.loadData();
  },
  onPullDownRefresh() {
    this.currentPage = 1;
    this.lists = [];
    this.loadData();
  },
  onReachBottom() {
    if (this.currentPage < this.lastPage) {
      this.currentPage += 1;
      this.loadData();
    }
  },
  methods: {
    async loadData() {

      this.$api.postBase({
        url: '/teacher/school',
        loadingTip: '加载中...',
        data: {
          page: this.currentPage,
          keyword : this.keyword
        },
        success: res => {
          uni.stopPullDownRefresh();
          this.isLoading = false;
          this.lists = [...this.lists, ...res.data];
          this.isEmpty = !this.lists.length;
          this.currentPage = res.current_page;
          this.lastPage = res.last_page;
        }
      });
    },

    keywordInput(e){
      this.keyword = e.detail.value;
      this.currentPage = 1;
      this.lists = [];
      this.loadData();
    },

    select(id,name){
      this.$xyfun.prePage().selectSchool(id,name);
      this.$xyfun.back();
    }

  }
}
</script>

<style scoped lang="scss">
.search{
  padding: 20rpx 18rpx 0 18rpx;
  position: relative;
  view{
    position: absolute;
    top: 34rpx;
    left: 44rpx;
    font-size: 42rpx;
    color: #ccc;
  }
  input{
    border-radius: 40rpx;
    border: 1rpx solid #ccc;
    height: 70rpx;
    font-size: 26rpx;
    padding-left: 80rpx;
  }
  .search_ph{
    color: #ccc;
  }
}
.lists {
  padding: 20rpx;

  .item {
    background: #f2f2f2;
    border-radius: 10rpx;
    margin-bottom: 20rpx;
    box-sizing: border-box;
    padding: 20rpx;
    font-size: 24rpx;
    color: #555;

  }
}
</style>